import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router';
import {message,Icon,Button,Input,Row,Col,Card,Anchor,Table,Dropdown,Menu} from 'antd';
const { Link } = Anchor;
import NavBar from 'common/NavBar';
import ContentBody from 'common/ContentBody';
import SearchPanel from 'common/SearchPanel';
import RemarkModal from 'common/RemarkModal';
import api from 'container/api';
import moment from 'moment';
import {bind_change, bind_toggle} from 'common/State';



import styles from './style/PropertyDataDetailInfo.scss';



import {
  ASSET_LEVEL,
  IS_NOT,
  GUARANTEE,
  TRANSPORT_TYPE,
  RETURNED_MONEY_WAY,
  RETURNED_MONEY_SOURCE,
  REMARK_TYPE
} from 'constants/index';

import {
  BaseInfo,
  Constract,
  PropertyOwnership,
  ReceiptInfo,
  SettleAccounts,
  ReturnedMoney,
  OtherInfo,
  TopCard
} from './property_data_detail_info';


export default class PropertyDataDetailInfo extends React.Component {
    constructor(props, context){
        super(props, context);
        let {id} = props.location.query||{}
        this.state={
          id
        };
    }

    componentWillMount(){

    }

    componentDidMount(){
      let _this = this;
      document.querySelector('#contentWraper').onscroll = function(e){
        if(e.target.scrollTop <= _this.getScrollOffset('baseInfo') ){
          _this.clearAllActive()
          document.querySelector('#aAnchor').setAttribute('class','active');
        }
      }
    }

    getScrollOffset(id){
      return document.querySelector(`#${id}`).offsetTop
    }
    //
    anchorChange(id,e){
      document.querySelector('#contentWraper').scrollTop = this.getScrollOffset(id);
      this.clearAllActive()
      e.target.setAttribute('class','active')
    }
    clearAllActive(){
      document.querySelectorAll('#propertyDetail-a-list a').forEach((item,index) => {
        item.setAttribute('class','');
      });
    }


    //提交入池
    onSubmit = async () => {
      let {id} = this.state;
      let result = await api('/assets/submit',{assetStatusType:'WAIT_TO_VERIFY',asset_id_list:[id]});
      if(!result.success){
        message.error(result.message);
        return
      }
      message.success('提交成功',1 ,() => {
        this.setState({id,renderTime:(+new Date)});
      })
    }

    render() {
      let {id} = this.state;
      let session = this.props.route.session;
      return (
        <div className={styles.propertyDataDetailInfo}>
          <div className={styles.contentHeader}>
            <Card title="资产详情" bordered={false} bodyStyle={{backgroundColor:'#f2f2f2',padding:'10px 24px'}}>
              <Button>返回</Button>
              <span className="ant-divider" />
              <Button onClick={this.onSubmit}>提交入池</Button>
            </Card>
          </div> 
          <div id='contentWraper' className={styles.contentWraper}>
            <div className={styles.content}>
              <div style={{height:20}} />
              <TopCard id={id} />
              <div style={{height:20}} />
              <div id='propertyDetail-a-list' className={styles.tagList}>
                <a href='javascript:void 0;'>应收账款<Icon type="question-circle-o" /></a>
                <a id='aAnchor' className='active' onClick={this.anchorChange.bind(this,'baseInfo')}>基础信息</a>
                <a onClick={this.anchorChange.bind(this,'UPSTREAM')}>上游合同</a>
                <a onClick={this.anchorChange.bind(this,'DOWNSTREAM')}>下游合同</a>
                <a onClick={this.anchorChange.bind(this,'propertyOwnership')}>货权信息</a>
                <a onClick={this.anchorChange.bind(this,'receiptInfo')}>发票信息</a>
                <a onClick={this.anchorChange.bind(this,'settleAccounts')}>结算信息</a>
                <a onClick={this.anchorChange.bind(this,'returnedMoney')}>回款信息</a>
                <a onClick={this.anchorChange.bind(this,'otherInfo')}>其他信息</a>
              </div> 
              {/*<div style={{height:20,backgroundColor:'#fff'}} />*/}
              <div id='baseInfo'><BaseInfo id={id} /></div>
              <div style={{height:20}} />
              <div id='UPSTREAM' ><Constract id={id} type='UPSTREAM' /></div>
              <div style={{height:20}} />
              <div id='DOWNSTREAM' ><Constract id={id} type='DOWNSTREAM'  /></div>
              <div style={{height:20}} />
              <div id='propertyOwnership'><PropertyOwnership id={id}/></div>
              <div style={{height:20}} />
              <div id='receiptInfo' ><ReceiptInfo id={id} /></div>
              <div style={{height:20}} />
              <div id='settleAccounts'><SettleAccounts id={id}/></div>
              <div style={{height:20}} />
              <div id='returnedMoney'><ReturnedMoney id={id}/></div>
              <div style={{height:20}} />
              <div id='otherInfo'><OtherInfo id={id} /></div>
            </div>
          </div>
        </div>
      );
    }
}


PropertyDataDetailInfo.contextTypes= { router: React.PropTypes.object.isRequired};
